<template>
  <u-popup :show="show" mode="bottom" @close="proClear" :round="10">
			<view class="formBox">
				<view class="formBox_title">预产期计算器</view>
				<view class="formBox_box" @click="openMen">
					<view class="formBox_box_l">末次月经开始日</view>
					<image class="formBox_box_r" src="https://weapp.miyingbl.com/static/icon/xiala.png" />
					<view class="formBox_box_shu" :style="{color:menstrual_day?'#333':'#909090'}">{{menstrual_day||"请选择"}}</view>
				</view>
				<view class="formBox_box" @click="openCycle">
					<view class="formBox_box_l">月经周期</view>
					<image class="formBox_box_r" src="https://weapp.miyingbl.com/static/icon/xiala.png" />
					<view class="formBox_box_shu" :style="{color:menstruation_cycle?'#333':'#909090'}">{{menstruation_cycle?menstruation_cycle+'天':"请选择"}}</view>
					<view class="formBox_box_ti">两次月经开始日间隔几天</view>
				</view>
				<view class="formBox_box" style="border-bottom: none;">
					<view class="formBox_box_l">计算结果</view>
					<view class="formBox_box_yu" :style="{color:due_date?'#333':'#909090'}">预产期是</view>
					<view class="formBox_box_day">{{due_date}}</view>
				</view>
				<view class="formBox_sm" v-if="due_date">系统居于末次月经时间计算，因月经周期长短不一，推测与实际结果可能会有一定差值，最终以产检结果为准。</view>
				<view class="formBox_btn" @click="bindPro">确定</view>
				<h-line height="45"></h-line>
			</view>
		</u-popup>
		<up-datetime-picker :formatter="formatter" format="YYYY-MM-DD" title="末次月经开始日" hasInput :show="menShow" v-model="newDate" mode="date" @close="clearMen" @cancel="clearMen" :closeOnClickOverlay="true" @confirm="menConfirm"></up-datetime-picker>
		<up-picker :show="cycleShow" title="月经周期" :columns="cycleColumns" @confirm="cycleConfirm" @close="clearCycle" @cancel="clearCycle" :closeOnClickOverlay="true"></up-picker>

</template>

<script setup>
	
/**
 *
 *
 * NavBar 自定义弹窗
 * @event {Function} show 显示
 * @event {Function} due_date 预产期
 * @event {Function} bind 计算完成并且关闭弹窗
 *
 * @example <h-count :show="countShow" :date="detail?.due_date" @clear="countShow = false" @bind="subJisuan" @open="countShow = true"></h-count>
 */
import { ref, onMounted } from 'vue'
import { formatDate } from '@/utils/utils.js'
import { pregnantTime } from '@/api/baby'
const props = defineProps({
  show: {
    type:Boolean
  }
})
	const emit = defineEmits(['clear', 'bind','open'])
	const menShow = ref(false)
	const cycleShow = ref(false)
	const due_date=ref("")
	const cycleColumns = ref([
		['21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35']
	]);
	const formatter = (type, value) => {
		if(type === 'year') {
			return `${value}年`;
		}
		if(type === 'month') {
			return `${value}月`;
		}
		if(type === 'day') {
			return `${value}日`;
		}
		return value;
	};
	const menstrual_day=ref("")
	const menstruation_cycle=ref("")
	const newDate = ref(Date.now())
	function openMen(){
		menShow.value=true
		proClear()
	}
	function openCycle(){
		cycleShow.value=true
		proClear()
	}
	function clearMen(){
		menShow.value=false
		emit('open')
	}
	function clearCycle(){
		cycleShow.value=false
		emit('open')
	}
	function menConfirm(e) {
		const {
			value
		} = e;
		menShow.value = false
		menstrual_day.value = formatDate(value);
		jisuan()
		emit('open')
	}
	function cycleConfirm(e) {
		const {
			value
		} = e;
		menstruation_cycle.value = value[0]
		cycleShow.value = false;
		jisuan()
		emit('open')
	}
	function proClear(){
		emit('clear')
	}
	async function jisuan(){
		const res = await pregnantTime({
			date: menstrual_day.value,
			menstruation_cycle: menstruation_cycle.value,
			status_type: 0
		})
		if(res.code==10000){
			due_date.value=res.data||""
		}else{
			uni.showToast({
				title:res.msg,
				icon: "none"
			})
		}
	}
	async function bindPro(){
		emit('bind',due_date.value)
	}
	
</script>

<style lang="scss" scoped>

	.formBox {
		width: 100%;
		.formBox_title {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 100rpx;
		}
		.formBox_box {
			overflow: hidden;
			box-sizing: border-box;
			width: 660rpx;
			margin: 0 auto;
			padding: 40rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			.formBox_box_l {
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				color: #333333;
				line-height: 50rpx;
				height: 50rpx;
				float: left;
			}
			.formBox_box_shu {
				width: 300rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 50rpx;
				box-sizing: border-box;
				text-align: right;
				float: right;
			}
			.formBox_box_ti {
				clear: both;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
				line-height: 34rpx;
				padding-top: 16rpx;
			}
			.formBox_box_day {
				width: 100%;
				clear: both;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #A48BFF;
				line-height: 45rpx;
				text-align: right;
				padding-right: 20rpx;
			}
			.formBox_box_yu {
				width: 300rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #666666;
				line-height: 50rpx;
				box-sizing: border-box;
				text-align: right;
				float: right;
				padding-right: 20rpx;
			}
			.formBox_box_r {
				width: 40rpx;
				height: 40rpx;
				position: relative;
				top: 5rpx;
				float: right;
			}
		}
		.formBox_sm {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #C1C1C1;
			line-height: 34rpx;
			box-sizing: border-box;
			padding: 0 33rpx 0 44rpx;
		}
		.formBox_btn {
			width: 666rpx;
			height: 75rpx;
			margin: 28rpx auto 0;
			background: #A48BFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 75rpx;
			text-align: center;
			border-radius: 38rpx;
		}
	}
</style>
